<template>
	<view class="scroller">
			<view append="tree" class="emoj_box">
				<block v-for="(item,index) in emojiList" :key="index">
					<text @click="setEmoj(item,index)" class="emoj_box_img">{{item}}</text>
				</block>
				<slot ></slot>
			</view>
	</view>
</template>

<script>
	export default {
		props: {
			emojiList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {}
		},
		methods:{
			setEmoj(item,index){
				console.log(item,index)
				this.$nextTick(() =>{
					this.$emit('setEmoji',item,index)
				})
			}
		}
	}
</script>

<style scoped>
	/* .scroller {
		flex: 1;
		
	} */

	.emoj_box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		word-break: break-all;
	}

	.emoj_box_img {
		display: inline-block;
		font-size: 1.5rem;
		margin-right: 0.5rem;
		text-align: center;
		width: 3.2rem;
		height: 3.2rem;
	}
</style>
